<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            padding:0;
            list-style:none;
        }
        #container{
            position:relative;
        }
        #container .box{
            float:left;
            padding:5px;
        }
        #container .box-img{
            padding:5px;
            border-radius:5px;
            box-shadow:0 0 5px #ccc;
            border:1px solid #B8B8B8;
        }
        #container img{
            width:230px;
            height: 330px;;
        }
    </style>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <SCRIPT src="/js/lazyload.js" type=text/javascript></SCRIPT>
    <script type="text/javascript" charset="utf-8">
        $(function() {
            $("img").lazyload({
                placeholder : "img/loading.gif",
                effect: "fadeIn"
            });
        });
    </script>
</head>
<body>
<div id='container'>
<div th:each="name : ${filenames}" class="box">
    <a th:href="${name}" target="_blank"><img src="/img/loading.gif" th:data-original="${name}" height="330" width="230"></a>
</div>
</div>
</body>
</html>